<template>
	<view class="wanlshop-product-container" :style="{ height: `${windowHeight1}` }">
		<view class="wanlshop-product-container__bar" v-if="type == null">
			<view class="list">
				<view class="item" :class="{ active: filterIndex === 0 }" @tap="handleBarTab(0)">综合</view>
				<view class="item" :class="{ active: filterIndex === 1 }" @tap="handleBarTab(1)">销量</view>
				<view class="item" :class="{ active: filterIndex === 2 }" @tap="handleBarTab(2)">新上架</view>
				<view class="item" :class="{ active: filterIndex === 3 }" @tap="handleBarTab(3)">
					<view>价格</view>
					<view class="box">
						<text :class="{ active: priceOrder === 1 && filterIndex === 3 }" class="wlIcon-sheng" />
						<text :class="{ active: priceOrder === 2 && filterIndex === 3 }" class="wlIcon-jiang" />
					</view>
				</view>
			</view>
			<view class="text-30 text-bold" @tap="handleListStyle">
				<text class="wlIcon-listing-jf" v-if="listStyle === 'col-2-10'"></text>
				<text class="wlIcon-liebiao" v-else></text>
			</view>
		</view>
		<scroll-view :style="{ height: `${windowHeight1}`}" scroll-y enable-back-to-top enable-flex="true"
			@scrolltoupper="handleUpper" @scrolltolower="handleLower">
			<view class="pl12 pr12">
				<wanl-product v-if="dataList.length > 0" :dataList="dataList" :dataType="params.type"
					:dataStyle="listStyle" :type='type' />
				<uni-load-more :status="status" :content-text="contentText" />
			</view>
			<wanl-empty v-if="dataList.length === 0 && status !=='loading'" :text="empty" />
			<view :style="{ height: `${tabbarHeight - 40}px`}" />
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "wanlShopProduct",
		props: {
			tabbarHeight: {
				type: Number,
				default: 0
			},
			windowHeight: {
				type: Number,
				default: 0
			},
			type: {
				type: Number,
				default: null
			},
			tabId: {
				type: String,
				default: ""
			},
			option: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				filterIndex: 0,
				priceOrder: 0, // 1 价格从低到高 2价格从高到低
				listStyle: 'col-2-10',
				dataList: [], // 数据
				empty: '',
				params: {
					search: '',
					sort: 'distance',
					order: 'asc',
					page: 1,
					filter: {},
					op: {},
					type: 'goods',
				},
				last_page: 1, //总页码
				status: 'loading',
				contentText: {
					contentdown: '下拉加载更多',
					contentrefresh: '疯狂加载中...',
					contentnomore: '没有更多数据了'
				},
				windowHeight1: "",

			}
		},
		created() {
			// #ifdef MP-WEIXIN
			this.windowHeight1 = 'calc(100vh - 400rpx)'
			// #endif	
			// #ifdef H5
			this.windowHeight1 = 'calc(100vh - 220rpx)'
			// #endif
		},
		mounted() {
			if (this.tabId === 'goods') {
				this.initialize(this.tabId);
			}
		},
		methods: {
			initialize(type) {
				this.params.type = type === 'groups' ? 'groups' : 'goods';
				// 判断是否类目搜索
				if (this.option.category_id) {
					this.params.filter.shop_category_id = this.option.category_id;
					this.params.op.shop_category_id = 'FIND_IN_SET';
					this.loadData();
					if (this.dataList.length === 0) {
						this.empty = `没有查询到相关宝贝，以下为您推荐猜你喜欢的商品~`;
					}
				} else {
					this.params.filter.shop_id = this.option.shop_id;
					if (type === 'send') {
						this.params.op.is_send = '=';
						this.params.filter.is_send = 1;
					}
					this.params.op.shop_id = 'in';
					if (type === 'news') {
						this.params.sort = 'createtime';
					}

					this.loadData();
					if (this.dataList.length === 0) {
						this.empty = '暂时没有在店铺内找到任何产品，请搜索查询~';
					}
				}
			},
			async loadData(type) {
				this.status = 'loading';
				// 判断上拉还是下拉
				if (type === 'upper') {
					this.params.page = 1;
				} else if (type === 'lower') {
					if (this.params.page >= this.last_page) {
						this.status = 'noMore';
						return false;
					} else {
						this.params.page += 1;
					}
				}
				// 请求数据
				await this.$api.get({
					url: '/wanlshop/product/lists',
					loadingTip: '加载中...',
					data: this.params,
					success: res => {
						if (type === 'lower') {
							this.dataList = this.dataList.concat(res.data);
						} else {
							this.dataList = res.data;
						}
						this.params.page = res.current_page; //当前页码
						this.last_page = res.last_page; //总页码
						// 判断是否还有数据
						if (res.current_page === res.last_page || res.total === 0) {
							this.status = 'noMore';
						} else {
							this.status = 'more';
						}
					}
				});
			},
			handleUpper() {
				// this.loadData('upper');
			},
			handleLower() {
				this.loadData('lower');
			},
			handleListStyle() {
				if (this.listStyle == 'col-1-10') {
					this.listStyle = 'col-2-10';
				} else {
					this.listStyle = 'col-1-10';
				}
			},
			handleBarTab(index) {
				if (this.filterIndex === index && index !== 3) {
					return;
				}
				this.filterIndex = index;
				if (index === 3) {
					this.priceOrder = this.priceOrder === 1 ? 2 : 1;
				} else {
					this.priceOrder = 0;
				}

				// 排序方式
				if (index === 0) {
					this.params.sort = 'distance';
					this.params.order = 'asc';
				}
				if (index === 1) {
					this.params.sort = 'sales';
					this.params.order = 'asc';
				}
				if (index === 2) {
					this.params.sort = 'createtime';
					this.params.order = 'asc';
				}
				if (index === 3 && this.priceOrder === 1) {
					this.params.sort = 'price';
					this.params.order = 'asc';
				}
				if (index === 3 && this.priceOrder === 2) {
					this.params.sort = 'price';
					this.params.order = 'desc';
				}
				this.status = 'loading';
				this.params.page = 1;
				this.loadData();
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				});
			}
		},
		watch: {
			tabId(newVal, oldVal) {
				if (newVal === 'news' || newVal === 'groups' || newVal === 'send') {
					this.dataList = [];
					this.initialize(newVal);
				}
			}
		}
	}
</script>

<style lang="scss">
	.wanlshop-product-container {
		background-color: #f9f9f9;
		border-radius: 30rpx 30rpx 0 0;

		&__bar {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			height: 40px;
			overflow: hidden;
			color: #555;

			.list {
				width: 75%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.item {
					display: flex;
					align-items: center;

					&.active {
						color: #f40;
						font-weight: bold;
					}

					.box {
						color: #ccc;
						margin-top: 2rpx;
						margin-left: 8rpx;
						display: flex;
						flex-direction: column;
						line-height: 1;

						.active {
							color: #f40;
						}
					}
				}
			}
		}
	}
</style>